<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2020-02-28 11:25:38
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../css/local.css" />
    <link rel="stylesheet" href="../script/elementui/lib/theme-chalk/index.css?t=1">
    <link href="../script/elementui/vue-element-table.css" rel="stylesheet" />
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/jquery.signalR-2.4.1.min.js"></script>
    <script type="text/javascript" src="../script/signalr-mediate.js"></script>
    <script type="text/javascript" src='http://36.26.80.127:20000/signalr/hubs'></script>
    <script type="text/javascript" src="../script/elementui.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <style type="text/css">
        .content {
            padding: 10px 25px 35px 25px;
        }

        .item {
            height: 100px;
            margin: 8px 20px;
            display: flex;
            flex-direction: column;
            background: #FFFFFF;
            border-radius: 10px;
            border: 1px solid #EAEAF5;
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
            color: #88cefa;
        }

        .item:active {
            color: #1989fa;
        }

        .van-icon {
            margin: auto;
        }

        .icon {
            height: 70%;
            display: flex;
        }

        .name {
            height: 30%;
            width: 100%;
            text-align: center;
        }

        .divcolor {
            width: 100px !important;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box" id="box">
            <van-nav-bar title="目    录" id="safeTop">
                <template #right>
                    <span style="color:#fff">{{apk}}</span>
                </template>
            </van-nav-bar>

            <div class="content1  content">
                <div class="divcolor" v-if='UserName=="充电工"'>
                    <el-select v-model="optionsvalue" placeholder="请选择" @change='changeValue'>
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <van-row class="content2">
                    <van-col span="6" v-for="item in list">
                        <div class="item" @click="intoItem(item)">
                            <div class="icon">
                                <van-icon v-if='item.APFunName!="报警"' :name="item.PIC_PH" size="30px"></van-icon>
                                <van-icon v-else :name="item.PIC_PH" size="30px" :badge="AlarmListnum" />
                            </div>
                            <div class="name">
                                {{item.APFunName}}
                                {{name}}
                            </div>
                        </div>
                    </van-col>
                </van-row>
            </div>
            <audio id="audioPlayer" preload="auto">
                <source src="../image/aigei_com.mp3" type="audio/mpeg">
            </audio>
            <div class="indexBottom">
                汇智云创 技术支持
            </div>
        </div>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {


        var isConnectStatus = true;
        api.addEventListener({
            name: 'refreshIndexList'
        }, function (ret) {
            window.localStorage.setItem('pageName', JSON.stringify('目录'))
            vm.add()
        })
        api.addEventListener({
            name: 'onIndex'
        }, function (ret) {
            console.log('跳转index页面开始调用')
            signalRHelper();
        })

        api.addEventListener({
            name: 'LunXunConnectStatus'
        }, function (ret) {
            api.sendEvent({
                name: 'onLunXunConnectStatus',
                extra: {
                    cs: isConnectStatus
                }
            })
        })

        api.addEventListener({
            name: 'sendMineMsg'
        }, function (ret) {
            console.log(JSON.stringify(ret));
            if (ret.value.str == 'AddAcidDetail') {
                var isSave = true;
                if (ret.value.data.isSave == "0") {
                    isSave = false;
                }
                console.log(isSave);
                vm.signalrList = ret.value.data.signalrDataList
                console.log('classID' + JSON.stringify(vm.signalrList))
                $.signalrApi.server.sendGSData(APP.getUserInfo().classID == 'C' ? 1 : 2, ret.value.data.data, ret.value.data.flash, isSave);
                console.log(JSON.stringify(ret.value));

            }
        })

        api.setScreenOrientation({
            orientation: 'auto_landscape'
        });
        api.addEventListener({
            name: 'auto_landscape_index'
        }, function (ret) {
            api.setScreenOrientation({
                orientation: 'auto_landscape'
            });
        })
        $.clientCallBacks = {};
        const signalRHelper = function () {
            $.signalrApi({
                serverUrl: "http://36.26.80.127:20000",
                clientHub: "GSHub",
                clientEvents: [
                    {
                        name: "onSendGSData",
                        method: function (data) {
                            $.clientCallBacks["onSendGSData"](data);
                        }
                    },
                ]
            });
            //socket连接
            function signalrConnect() {
                var that = this
                try {
                    // alert('开始连接')
                    $.signalrApi.start(function () {
                        console.log('服务器链接成功');
                        api.toast({
                            msg: '服务器链接成功!'
                        })
                        console.log('1111');
                        isConnectStatus = true;
                        $.signalrApi.server.getGSData(JSON.stringify(APP.getUserInfo().classID));

                    });
                }
                catch (e) {
                    console.log(4444);
                    signalrConnect();
                    isConnectStatus = false;
                }
            }
            signalrConnect();

            setInterval(() => {
                try {
                    // console.log('定时器执行')
                    $.signalrApi.server.getGSData(JSON.stringify(APP.getUserInfo().classID));
                }
                catch (e) {
                    isConnectStatus = false;
                    signalrConnect();
                }
            }, 2000);
        }




        api.addEventListener({
            name: 'resume'
        }, function (ret, err) {
            console.log('主页重新连接')

            signalRHelper();
        });

        api.addEventListener({
            name: 'resumesendEvent'
        }, function (ret) {
            console.log('ret', JSON.stringify(ret));
            // alert(JSON.stringify(ret))
            if (ret.value.pageName == '灌酸 上架') {
                api.openWin({
                    name: 'onIndex',
                    url: 'index.html',
                    pageParam: {
                        url: 'AddAcidDetail',
                        obj: ret.value.pageData,
                        name: ret.value.pageName
                    },
                    reload: true,
                })
            }
            //     console.log('息屏重新连接')
            //     signalRHelper();

        })



        vm = new Vue({
            el: '#app',
            data: {
                optionsvalue: '',
                options: [
                    {
                        value: 'C线',
                        label: 'C线'
                    },
                    {
                        value: 'D线',
                        label: 'D线'

                    },

                ],
                signalrList: '',
                deviceModel: api.deviceModel,
                list: [],
                AlarmListnum: '',
                name: '',
                // apk: JSON.parse(window.localStorage.getItem('apk'))
                apk: api.appVersion,
                UserName: ''
            },
            created: function () {
                var that = this;
                that.optionsvalue = JSON.parse(window.localStorage.getItem('userInfo')).className
                var userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
                if (userInfo.UserName) {
                    that.UserName = userInfo.UserName
                }
                let RoleId = {
                    APPType: 30,
                    // APPType: 2,
                    RoleId: APP.getUserInfo().RoleID
                }
                APP.ajax('getAppModuleByRoleId', RoleId, function (res) {
                    console.log(JSON.stringify(res));
                    that.list = res.ds
                })
                // APP.getYCKBDataLiist()

                setInterval(function () {
                    APP.addTime()
                    that.add()

                    if (JSON.parse(window.localStorage.getItem('pageName')) != '装配工单') {
                        api.sendEvent({
                            name: 'getYCKBDataLiist',
                        })
                        api.sendEvent({
                            name: 'getCDAlarmLList',
                        })
                    }
                    if (JSON.parse(window.localStorage.getItem('pageName')) == '目录') {
                        APP.getCDAlarmLList()
                        APP.getYCKBDataLiist()
                    }

                }, 60000)


                signalRHelper();
                $.clientCallBacks["onSendGSData"] = function (data) {
                    var signalrData = JSON.parse(data)
                    var classID = APP.getUserInfo().classID == 'C' ? 1 : 2
                    if (signalrData.classID == classID) {
                        let signalrDataList = {
                            list: signalrData,
                        }
                        api.sendEvent({
                            name: 'reshAddAcidDetail',
                            extra: signalrDataList
                        })
                    }
                }


                setTimeout(function () {
                    if (api.pageParam.url) {
                        console.log(JSON.stringify(api.pageParam));
                        var obj = {
                            name: api.pageParam.name,
                            GSRow: api.pageParam.obj,
                        }
                        // alert(JSON.stringify(obj))
                        api.openWin({
                            name: 'onAddAcidDetail',
                            url: 'AddAcidDetail.html',
                            pageParam: {
                                name: api.pageParam.name,
                                GSRow: api.pageParam.obj,
                                msg: '首页'
                            },
                            reload: true
                        })
                    }
                }, 1000);
            },
            mounted() {
                var that = this
                that.add()
                APP.addTime()
                // APP.getCDAlarmLList()
                APP.setSafeTop()
                APP.setPage()
                window.localStorage.setItem('pageName', JSON.stringify('目录'))
            },

            beforeDestroy() {
                api.removeEventListener({
                    name: 'sendMineMsg'
                })
            },
            methods: {
                changeValue(val) {
                    var that = this
                    console.log(val)
                    var getUserInfo = APP.getUserInfo()
                    getUserInfo.className = val
                    getUserInfo.classID = val.slice(0, -1)
                    window.localStorage.setItem('CS', JSON.stringify(val))
                    window.localStorage.setItem('userInfo', JSON.stringify(getUserInfo))

                    setTimeout(() => {
                        window.location.reload();
                    }, 100);
                },
                add() {
                    var that = this
                    var obj = {
                        APPType: 2,
                        RoleId: APP.getUserInfo().RoleID,
                        CJ: JSON.parse(window.localStorage.getItem('userInfo')).classID

                    }
                    APP.ajax('getAlarmList', obj, function (res) {
                        var audioPlayer = document.getElementById('audioPlayer');
                        if (res.ds1[0].TS == 0) {
                            that.AlarmListnum = ''
                            audioPlayer.pause()
                        } else {
                            that.AlarmListnum = res.ds1[0].TS
                            audioPlayer.play();
                        }
                    })
                },

                intoItem(row) {
                    var that = this
                    // alert(row.APFunName)
                    console.log(JSON.stringify(row));
                    api.openWin({
                        name: row.AP_Link,
                        url: row.AP_Link + '.html',
                        reload: true,
                        pageParam: {
                            name: row.APFunName
                        }
                    })
                }
            }
        })
    };
</script>

</html>